'use client';
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, Package, ClipboardList } from "lucide-react"

const navItems = [
  {
    href: "/merchant",
    icon: Home,
    label: "首页"
  },
  {
    href: "/merchant/products",
    icon: Package,
    label: "商品管理"
  },
  {
    href: "/merchant/orders",
    icon: ClipboardList,
    label: "订单管理"
  }
]

export function MerchantNav() {
  const pathname = usePathname()

  return (
    <nav className="space-y-2">
      {navItems.map((item) => {
        const isActive = pathname === item.href
        return (
          <Link
            key={item.href}
            href={item.href}
            className={`flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-amber-900 ${isActive
                ? "bg-amber-100 text-amber-900"
                : "text-gray-500 hover:bg-amber-50"
              }`}
          >
            <item.icon className="h-5 w-5" />
            <span>{item.label}</span>
          </Link>
        )
      })}
    </nav>
  )
}

